Improve this doc View source

pfCard - Utilization
directive in module patternfly.card

Description

Component for easily displaying a card with html content

Usage

as element:
<pf-card - -utilization
       head-title="{string}"
       [sub-title="{string}"]
       [spinner-text="{string}"]
       [show-top-border="{boolean}"]
       [show-titles-separator="{boolean}"]
       [show-spinner="{boolean}"]
       [footer="{object}"]
       [filter="{object}"]>
</pf-card - -utilization>

Parameters

ParamTypeDetails
headTitlestring

Title for the card

subTitle
(optional)
string

Sub-Title for the card

spinnerText
(optional)
string

Text for the card spinner

showTopBorder
(optional)
boolean

Show/Hide the blue top border. True shows top border, false (default) hides top border

showTitlesSeparator
(optional)
boolean

Show/Hide the grey line between the title and sub-title. True (default) shows the line, false hides the line

showSpinner
(optional)
boolean

Show/Hide the spinner for loading state. True shows the spinner, false (default) hides the spinner

footer
(optional)
object

footer configuration properties:

  • .iconClass - (optional) the icon to show on the bottom left of the footer panel

  • .text - (optional) the text to show on the bottom left of the footer panel, to the right of the icon

  • .href - (optional) the href link to navigate to when the footer href is clicked

  • .callBackFn - (optional) user defined function to call when the footer href is clicked
*Note: If a href link and a callBackFn are specified, the href link will be called

filter
(optional)
object

filter configuration properties:

  • .filters - drop down items for the filter. 
     Ex:  'filters' : [{label:'Last 30 Days', value:'30'},
                   {label:'Last 15 Days', value:'15'},
                   {label:'Today', value:'today'}]
  • .defaultFilter - integer, 0 based index into the filters array
  • .callBackFn - user defined function to call when a filter is selected

Example

Source













Demo